<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: #6ff;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <!-- <div id="box" onclick="" style="background:red"></div> -->
    <div id="box"></div>
</body>
<script>
    // 变量  => 存储数据的容器
    // (1) 对于一些复杂的逻辑处理工作(运算),通过变量 可以记录处理的结果

    // console.log(((100+200)*3+50)/2-25);
    // console.log(100+200);
    // console.log((100+200)*3);
    // console.log((100+200)*3+50);
    // console.log(((100+200)*3+50)/2);
    // console.log(((100+200)*3+50)/2-25);

    // var a = 100;
    // var b = 200;
    // var c = a + b;
    // var d = c * 3;
    // var e = d + 50;
    // var f = e / 2;
    // var g = f -25;
    // console.log(a,b,c,d,e,f,g);


    // (2) 可以存储页面中获取的元素 和 值 

    // 拓展!!!!!!!!!!

    // a.  document.getElementById("id名")  在文档(页面)中,获取对应id名的元素 (方法)
    //     有 => 则返回对应的元素
    //     没有 => 则返回 null;

    // b.  JS操作元素之前必须先获取该元素
    // c.  JS操作元素改变样式(css)时, 都是通过内联样式实现的

    //  document.getElementById("box")  获取元素
    //  console.log(document.getElementById("box"));
    //  console.log(document.getElementById("box1"));

    // 给获取的元素 绑定一个点击事件 (当元素被点击时 执行function中{}的代码)
    // document.getElementById("box").onclick = function(){
    //     // alert(11111);
    //     // 获取的元素  将元素的背景改为红色
    //     document.getElementById("box").style.background = "red";
    // }


    // 通过id名获取对应的元素  赋值给变量box
    var box = document.getElementById("box");  // 获取元素
    console.log(box);

    // 绑定事件(操作元素)
    box.onclick = function(){
        // alert(11111);
        box.style.background = "red";  // 改变样式(操作元素)
    }




</script>
</html>